-webkit-mask-position-y

Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.

La propriété -webkit-mask-position-y permet de définir la position verticale initiale d'une image de masque.

css

/* Valeurs avec un mot-clé */
-webkit-mask-position-y: top;
-webkit-mask-position-y: center;
-webkit-mask-position-y: bottom;

/* Valeurs proportionnelles */
/* Type <percentage>        */
-webkit-mask-position-y: 100%;
-webkit-mask-position-y: -50%;

/* Valeurs de longueur */
/* Type <length>       */
-webkit-mask-position-y: 50px;
-webkit-mask-position-y: -1cm;

/* Gestion de plusieurs valeurs */
-webkit-mask-position-y:
  50px,
  25%,
  -3em;

/* Valeurs globales */
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
-webkit-mask-position-y: unset;

Syntaxe

Valeurs

<length-percentage>: Une longueur indiquant la position du haut de l'image à partir du bord haut de la boîte de remplissage (padding). Les pourcentages sont calculés relativement à la dimension verticale de la boîte de remplissage (0% indique que le bord haut de l'image est aligné avec le bord haut de la boîte de remplissage et 100% indique que le bord bas de l'image est aligné avec le bord bas de la boîte de remplissage).
<length>: Une longueur, mesurée à partir du bord haut de la boîte de remplissage (padding), qui indique la position verticale de l'image.
top: Un mot-clé équivalent à 0%.
bottom: Un mot-clé équivalent à 100%.
center: Un mot-clé équivalent à 50%.

Syntaxe formelle

Error: could not find syntax for this item

Exemples

css

.exempleUn {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: bottom;
}

.exempleDeux {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: 25%;
}

Spécifications

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

Valeur initiale	`0%`
Applicabilité	tous les éléments
Héritée	non
Pourcentages	fait référence à la taille de la boîte elle-même
Valeur calculée	pour `<length>`, la valeur absolue, sinon un pourcentage
Type d'animation	discrète